import AnimatedSection from '../components/shared/AnimatedSection'
import Button from '../components/shared/Button'
import { FiLinkedin, FiTwitter } from 'react-icons/fi'

const teamMembers = [
  {
    name: 'Alex Johnson',
    position: 'CEO & Founder',
    bio: 'Expert in UX design with over 15 years of experience in the tech industry.',
    image: 'https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
  },
  {
    name: 'Sarah Williams',
    position: 'Lead Designer',
    bio: 'Award-winning designer with a passion for creating intuitive interfaces.',
    image: 'https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
  },
  {
    name: 'Michael Chen',
    position: 'CTO',
    bio: 'Technical visionary with expertise in scalable architecture and performance.',
    image: 'https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
  },
  {
    name: 'Emily Rodriguez',
    position: 'Product Manager',
    bio: 'Leads product strategy with a focus on customer needs and market trends.',
    image: 'https://images.pexels.com/photos/1181686/pexels-photo-1181686.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
  }
]

function About() {
  return (
    <div className="pb-12">
      {/* Hero Section */}
      <section className="pt-32 md:pt-40 pb-16">
        <div className="container-custom">
          <AnimatedSection>
            <h1 className="text-4xl md:text-5xl font-medium text-secondary-900 dark:text-white mb-6 text-center">
              Our Story
            </h1>
            <p className="text-lg md:text-xl text-secondary-600 dark:text-secondary-300 max-w-3xl mx-auto text-center">
              Founded with a vision to create products that are both beautiful and functional, we're on a mission to redefine digital experiences.
            </p>
          </AnimatedSection>
        </div>
      </section>

      {/* Vision Section */}
      <section className="py-16">
        <div className="container-custom">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <AnimatedSection direction="right">
              <div>
                <h2 className="text-3xl md:text-4xl font-medium text-secondary-900 dark:text-white mb-6">
                  Our Vision
                </h2>
                <p className="text-lg text-secondary-600 dark:text-secondary-300 mb-6">
                  We believe technology should work for people, not the other way around. Our products are designed with a deep understanding of human needs and behaviors, focusing on simplicity, elegance, and functionality.
                </p>
                <p className="text-lg text-secondary-600 dark:text-secondary-300 mb-6">
                  Since our founding in 2018, we've been obsessed with creating experiences that people love. We sweat the details because we believe that's where the magic happens.
                </p>
                <div className="mt-8">
                  <Button>Learn about our approach</Button>
                </div>
              </div>
            </AnimatedSection>
            
            <AnimatedSection direction="left">
              <div className="rounded-apple overflow-hidden shadow-apple dark:shadow-apple-dark">
                <img 
                  src="https://images.pexels.com/photos/3184339/pexels-photo-3184339.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" 
                  alt="Our team collaborating" 
                  className="w-full h-auto"
                />
              </div>
            </AnimatedSection>
          </div>
        </div>
      </section>

      {/* Values Section */}
      <section className="py-16 bg-secondary-50 dark:bg-secondary-900/50">
        <div className="container-custom">
          <AnimatedSection direction="none">
            <div className="text-center mb-16">
              <h2 className="text-3xl md:text-4xl font-medium text-secondary-900 dark:text-white mb-4">
                Our Values
              </h2>
              <p className="text-lg text-secondary-600 dark:text-secondary-300 max-w-3xl mx-auto">
                The principles that guide everything we do
              </p>
            </div>
          </AnimatedSection>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {[
              {
                title: "User-Centered Design",
                description: "We put users at the center of everything we create, focusing on their needs, goals, and pain points."
              },
              {
                title: "Continuous Innovation",
                description: "We're never satisfied with the status quo, constantly pushing boundaries to create better solutions."
              },
              {
                title: "Attention to Detail",
                description: "We believe the little things matter. Every pixel, interaction, and line of code is crafted with care."
              },
              {
                title: "Transparency",
                description: "We believe in open, honest communication with our customers, partners, and team members."
              },
              {
                title: "Quality Over Quantity",
                description: "We prioritize building fewer things with exceptional quality rather than many things that are merely good."
              },
              {
                title: "Diversity & Inclusion",
                description: "We embrace different perspectives, knowing they lead to more creative solutions and better products."
              }
            ].map((value, index) => (
              <AnimatedSection key={index} delay={0.1 * index}>
                <div className="bg-white dark:bg-secondary-800 rounded-apple p-6 h-full shadow-apple dark:shadow-apple-dark">
                  <h3 className="text-xl font-medium text-secondary-900 dark:text-white mb-3">
                    {value.title}
                  </h3>
                  <p className="text-secondary-600 dark:text-secondary-400">
                    {value.description}
                  </p>
                </div>
              </AnimatedSection>
            ))}
          </div>
        </div>
      </section>

      {/* Team Section */}
      <section className="py-16">
        <div className="container-custom">
          <AnimatedSection direction="none">
            <div className="text-center mb-16">
              <h2 className="text-3xl md:text-4xl font-medium text-secondary-900 dark:text-white mb-4">
                Meet Our Team
              </h2>
              <p className="text-lg text-secondary-600 dark:text-secondary-300 max-w-3xl mx-auto">
                The talented people behind our products
              </p>
            </div>
          </AnimatedSection>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {teamMembers.map((member, index) => (
              <AnimatedSection key={index} delay={0.1 * index}>
                <div className="bg-white dark:bg-secondary-800 rounded-apple overflow-hidden shadow-apple dark:shadow-apple-dark">
                  <div className="aspect-w-1 aspect-h-1">
                    <img 
                      src={member.image} 
                      alt={member.name} 
                      className="w-full h-64 object-cover object-center"
                    />
                  </div>
                  <div className="p-5">
                    <h3 className="text-xl font-medium text-secondary-900 dark:text-white">
                      {member.name}
                    </h3>
                    <p className="text-primary-500 text-sm mb-2">{member.position}</p>
                    <p className="text-secondary-600 dark:text-secondary-400 text-sm mb-4">
                      {member.bio}
                    </p>
                    <div className="flex space-x-2">
                      <a 
                        href="#" 
                        className="p-2 text-secondary-400 hover:text-primary-500 transition-colors"
                        aria-label={`${member.name}'s LinkedIn`}
                      >
                        <FiLinkedin size={18} />
                      </a>
                      <a 
                        href="#" 
                        className="p-2 text-secondary-400 hover:text-primary-500 transition-colors"
                        aria-label={`${member.name}'s Twitter`}
                      >
                        <FiTwitter size={18} />
                      </a>
                    </div>
                  </div>
                </div>
              </AnimatedSection>
            ))}
          </div>
        </div>
      </section>

      {/* Timeline Section */}
      <section className="py-16 bg-secondary-50 dark:bg-secondary-900/50">
        <div className="container-custom">
          <AnimatedSection direction="none">
            <div className="text-center mb-16">
              <h2 className="text-3xl md:text-4xl font-medium text-secondary-900 dark:text-white mb-4">
                Our Journey
              </h2>
              <p className="text-lg text-secondary-600 dark:text-secondary-300 max-w-3xl mx-auto">
                Key milestones that shaped our company
              </p>
            </div>
          </AnimatedSection>

          <div className="relative">
            {/* Timeline line */}
            <div className="absolute left-0 md:left-1/2 h-full w-0.5 bg-primary-200 dark:bg-primary-800 translate-x-0 md:-translate-x-0.5"></div>
            
            {/* Timeline items */}
            <div className="space-y-12">
              {[
                {
                  year: "2018",
                  title: "Company Founded",
                  description: "Started with a small team of 3 passionate designers and developers."
                },
                {
                  year: "2019",
                  title: "First Product Launch",
                  description: "Released our flagship product to overwhelmingly positive feedback."
                },
                {
                  year: "2020",
                  title: "Remote-First Culture",
                  description: "Embraced remote work, expanding our team across 12 countries."
                },
                {
                  year: "2022",
                  title: "Major Expansion",
                  description: "Reached 100,000 users and expanded our product lineup."
                },
                {
                  year: "2024",
                  title: "Today",
                  description: "Continuing to innovate and create products people love."
                }
              ].map((item, index) => (
                <AnimatedSection 
                  key={index} 
                  delay={0.1 * index}
                  direction={index % 2 === 0 ? "right" : "left"}
                >
                  <div className={`relative flex flex-col md:flex-row ${index % 2 !== 0 ? 'md:flex-row-reverse' : ''} items-center`}>
                    {/* Content */}
                    <div className="md:w-1/2 relative z-10 mb-8 md:mb-0">
                      <div className={`bg-white dark:bg-secondary-800 rounded-apple p-6 shadow-apple dark:shadow-apple-dark ${index % 2 === 0 ? 'md:mr-8' : 'md:ml-8'}`}>
                        <span className="text-sm font-medium text-primary-500 block mb-2">{item.year}</span>
                        <h3 className="text-xl font-medium text-secondary-900 dark:text-white mb-2">
                          {item.title}
                        </h3>
                        <p className="text-secondary-600 dark:text-secondary-400">
                          {item.description}
                        </p>
                      </div>
                    </div>
                    
                    {/* Circle marker */}
                    <div className="absolute left-0 md:left-1/2 w-5 h-5 bg-primary-500 rounded-full border-4 border-white dark:border-secondary-900 -translate-x-2 md:-translate-x-2.5"></div>
                  </div>
                </AnimatedSection>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16">
        <div className="container-custom">
          <AnimatedSection>
            <div className="text-center max-w-3xl mx-auto">
              <h2 className="text-3xl md:text-4xl font-medium text-secondary-900 dark:text-white mb-6">
                Join Our Team
              </h2>
              <p className="text-lg text-secondary-600 dark:text-secondary-300 mb-8">
                We're always looking for talented people who share our passion for creating exceptional products.
              </p>
              <Button size="lg">View Open Positions</Button>
            </div>
          </AnimatedSection>
        </div>
      </section>
    </div>
  )
}

export default About